<template>
  <a-modal v-model:open="picModalOpen" title="选项图片" @ok="onPicModalOk">
    <div class="upload-wrapper">
      <div class="img-wrapper" v-if="!!currentImageUrl">
        <img
          :src="currentImageUrl"
          alt="image_url"
          style="width: 100%; height: 100%"
        />
        <div class="mask">
          <a-button
            type="link"
            :icon="h(DeleteOutlined)"
            @click="onDeletePic"
          ></a-button>
        </div>
      </div>

      <a-upload
        v-else
        v-model:file-list="fileList"
        name="file"
        accept="image/png, image/jpeg"
        list-type="picture-card"
        :show-upload-list="false"
        action=""
        :before-upload="beforeUpload"
        :customRequest="uploadImage"
      >
        <div>
          <plus-outlined></plus-outlined>
          <div class="ant-upload-text">上传图片</div>
        </div>
      </a-upload>
    </div>
    <div v-if="imageList.length > 0">
      <div>参考图片：</div>
      <div class="img-list">
        <div
          class="img-wrapper"
          :class="{ selected: image.image_url === currentImageUrl }"
          v-for="image in imageList"
          :key="image.option_code"
          @click="onPicClick(image.image_url)"
        >
          <img :src="image.image_url" />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { defineExpose, defineEmits } from 'vue';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { uploadFile } from '@/api/global';
import type { ConditionOption } from '../type';
const emit = defineEmits(['ok']);

const condition = ref<ConditionOption>();
const picModalOpen = ref<boolean>(false);
const fileList = ref([]);
const currentImageUrl = ref<string>();

const imageList = computed(() => {
  // 把一个condition对应的多个match里的每一个关联的option提取出来，二维数组扁平化成一维数组，再去掉image_url为空的
  return condition.value?.matches
    .map(match =>
      match.options.map(option => ({
        image_url: option.image_url,
        option_code: option.option_code,
      }))
    )
    ?.flat()
    ?.filter(ele => !!ele.image_url);
});

const beforeUpload = (file: File) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('您只能上传jpg、jpeg和png格式的图片');
  }
  const isLt256k = file.size / 1024 < 256;
  if (!isLt256k) {
    message.error('图片大小不能超过256KB');
  }
  return isJpgOrPng && isLt256k;
};

const uploadImage = (data: any) => {
  uploadFile(data.file, 'OptionLogo')
    .then(res => {
      if (res.code === 'ok') {
        currentImageUrl.value = res.data;
      }
    })
    .catch(err => {});
};

const openPicModal = (obj: ConditionOption) => {
  condition.value = obj;
  currentImageUrl.value = obj.image_url;
  picModalOpen.value = true;
};

const onPicClick = (url: string) => {
  currentImageUrl.value = url;
};

const onDeletePic = () => {
  currentImageUrl.value = undefined;
};

const onPicModalOk = () => {
  emit('ok', condition.value?.alias_name, currentImageUrl.value);
  picModalOpen.value = false;
};

defineExpose({ openPicModal });
</script>

<style lang="scss" scoped>
.upload-wrapper {
  text-align: center;

  .img-wrapper {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;

    .mask {
      display: none;
      position: absolute;
      padding: 30px;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.35);
    }

    &:hover {
      .mask {
        display: block;
      }
    }
  }

  :deep(.ant-upload-wrapper) {
    text-align: center;
  }
}

.img-list {
  .img-wrapper {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-top: 8px;
    margin-right: 8px;
    border: 2px solid #fff;
    cursor: pointer;
    &.selected {
      border-color: #197ce0;
    }
    img {
      width: 100%;
    }
  }
}
</style>
